<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单数据的收集</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <form>
        用户名:<input type="text" v-model="user.username"><br/><br/>
        密 码:<input type="password" v-model="user.password"><br/><br/>
        年龄:<input type="number" v-model="user.age"><br/><br/>
        性别:
            男<input type="radio" name="gender" value="1" v-model="user.gender">
            女<input type="radio" name="gender" value="0" v-model="user.gender"><br/><br/>
        爱好:
            旅游<input type="checkbox" v-model="user.interest" value="travel">
            运动<input type="checkbox" v-model="user.interest" value="sport">
            唱歌<input type="checkbox" v-model="user.interest" value="sing"><br/><br/>
        学历:
            <select v-model="user.grade">
                <option value="">请选择学历</option>
                <option value="zk">专科</option>
                <option value="bk">本科</option>
                <option value="ss">硕士</option>
            </select><br/><br/>
        简介:
        <textarea cols="50" rows="15" v-model="user.introduce"></textarea><br/><br/>
        <input type="checkbox" v-model="user.accept">阅读并接受协议<br/><br/>
        <!--禁止默认行为-->
        <button @click.prevent="send">注册</button>
    </form>
</div>

<script>
     const vm = new Vue({
             el : '#app',
             //Model M
             data : {
                 //定义表单的数据
                 user : {
                     username : '',
                     password : '',
                     age : '',
                     gender : '1',
                     interest : ['travel'],
                     grade : 'ss',
                     introduce : '',
                     accept : ''
                 },
                 msg : '表单数据的收集'
             },
            methods : {
                 send(){
                     // alert('ajax...!!!')
                     //将数据收集好,发送给服务器
                     // console.log(JSON.stringify(this.user))
                     console.log(JSON.stringify(this.$data))
                 }
            }

         })
</script>

</body>
</html>